<template>
    <div class="integralCard">
<!--      <div class="integralCard-title">-->
<!--        <div>-->
<!--          <p></p>-->
<!--          <p>{{record.month}}</p>-->
<!--        </div>-->
<!--        <div>-->
<!--          <p>获取：<span>{{record.gain}}</span></p>-->
<!--          <p>使用：{{record.use}}</p>-->
<!--        </div>-->
<!--      </div>-->
      <div>
        <div class="integralCard-content">
          <div>
            <h1 class="integralCard-content-title">{{record.title}}</h1>
            <p>{{record.created_at}}</p>
          </div>
          <p v-if="record.type === '1'" class="add">+{{record.int}}</p>
          <p v-else class="minus">-{{record.int}}</p>
        </div>
      </div>
    </div>
</template>

<script>
    export default {
        name: "index",
      props:{
        record:{
          type:Object
        }
      }
    }
</script>

<style scoped>

  .integralCard-title{
    display: flex;
    justify-content: space-between;
    padding: 20rpx;
    box-sizing: border-box;
    border: 1rpx solid #EF5A56;
    border-radius: 10rpx;
    background-color: #ffffff;
  }
.integralCard-title>div{
  display: flex;
  align-items: center;
}
.integralCard-title>div:first-child>p:first-child{
  width: 8rpx;
  height: 28rpx;
  background-color: #EF5A56;
  border-radius: 3rpx;
}
.integralCard-title>div:first-child>p:last-child{
  font-size: 30rpx;
  font-weight: bold;
  margin-left: 9rpx;
}
.integralCard-title>div:last-child>p{
  font-size: 24rpx;
  color: #323232;
  font-weight: bold;
}
.integralCard-title>div:last-child>p>span{
  color: #EF5A56;
  margin-right: 66rpx;
}
.integralCard-title+div{
  background-color: #FFFFFF;
  border-radius: 10rpx;
}
  .integralCard-content{
    background-color: #ffffff;
    padding: 30rpx 22rpx;
    border-bottom: 1rpx solid #EEEEEE;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
.integralCard-content>div>h1{
  font-size: 30rpx;
  color: #323232;
  font-weight: bold;
}
.integralCard-content>div>p{
  font-size: 20rpx;
  color: #BABABA;
  line-height: 20rpx;
  font-weight: bold;
  margin-top: 9rpx;
}
.integralCard-content>p{
  font-size: 30rpx;
  font-weight: bold;

}
.integralCard-content-title{
  width: 500rpx;
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
}
.add{
  color: #EF5A56;
}
  .minus{
    color: #BABABA;
  }
</style>
